<template>
	<view class="content-box">
		<uv-sticky>
		<view class="search-box">
			<u-search
			v-model="searchVal"
			placeholder="搜索商品"
			margin="0rpx 30rpx 0rpx 30rpx"
			height="64"
			input-align="center"
			:showAction="false"
			@search="onSearch"
			@clear="clearSearch">
			</u-search>
				<uv-tabs
				:list="list"
				:current="current"
				lineWidth="30"
				lineColor="#006ab4" 
				itemStyle="padding-left: 5px; padding-right: 5px; margin-top:10rpx; height: 44px;"
				:activeStyle="{
				    color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				@click="click"
				>
			</uv-tabs>
		</view>
		</uv-sticky>
		<view class="wterfall-box">
			<shHotList
			ref="hotlist"
			:type="`STUDENT`"
			:keyword="searchVal"
			></shHotList>
		</view>
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>
	import shHotList from '../components/sh-goods-student-waterfall.vue'
	export default{
		components:{
			shHotList
		},
		data(){
			return{
				isShow: false,
				searchVal: '',
				list: [
					{
						name:'全部',
						id: 0
					}
				],
				current: 0
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		onReachBottom() {
			if(this.$refs.hotlist.onEnd) return
			this.$refs.hotlist.page += 1
			this.$refs.hotlist.hasUserGet()
		},
		created() {
		this.getCate()	
		},
		methods:{
			pullTop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到距离顶部为0
					duration: 500 //滚动时长
				})
			},
			onSearch(){
				this.current = 0
				this.$refs.hotlist.Cid = ''
				this.$refs.hotlist.clear()
				this.$refs.hotlist.hasUserGet()
			},
			clearSearch(){
				this.current = 0
				this.$refs.hotlist.Cid = ''
				this.searchVal = ''
				this.$refs.hotlist.onEnd = false
				this.$refs.hotlist.clear()
			},
			click(e){
				if(e.index == this.current) return
				this.current = e.index
				this.$refs.hotlist.onEnd = false
				this.$refs.hotlist.Cid = e.id
				this.$refs.hotlist.clear()
			},
			getCate(){
				this.$http('goods.getStudentCate',{
					type:'STUDENT'
				})
				.then(res=>{
					this.list = this.list.concat(res.cateList)
					// this.$refs.hotlist.Cid = this.list[0].id
					this.$refs.hotlist.hasUserGet()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box{
		// background:#FFFFFF;
		// height: 100vh;
		.search-box{
			width: 100%;
			height: 227rpx;
			background: linear-gradient(0deg, #f6f6f6, #89b8f5);
			padding-top: 30rpx;
		}
		.wterfall-box{
			position: relative;
			top: -10rpx;
		}
	}
	::v-deep .waterfall{
		background: #f6f6f6 !important;
	}
</style>